<!--  -->
<template>
  <div class="">
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <storeSelect v-model="filter.storeCode" placeholder="店铺" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <brandSelect v-model="filter.brandCode" placeholder="归属品牌" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <DateTimeRange
                  v-model="filter._dateRange"
                  :startDate.sync="filter.transBeginDate"
                  :endDate.sync="filter.transEndDate"
                  :placeholder="['交易开始时间', '交易结束时间']"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card class="table-wrapper">
      <div class="box">
        <div class="box-act">
          <import-excel
            title="导入营业收入"
            @on-suceess="handle"
            :style="{ marginRight: '15px' }"
            :uploadConfig="UPLOAD_URL"
          ></import-excel>
        </div>
      </div>
      <a-table
        :loading="tableLoading"
        bordered
        :columns="columns"
        :pagination="pagination"
        :data-source="tableData || []"
        @change="(e) => handle(e)"
        :scroll="{ y: tableHeight }"
      >
        <span slot="storeName" slot-scope="text, record">
          <div class="text">{{ text }}</div>（{{ record.storeCode }}）
        </span>
        <span slot="brandName" slot-scope="text, record">
          <div class="text">{{ text }}</div>（{{ record.brandCode }}）
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="checkAccountDetail(record)">查看分账明细</a-button>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { storeRevenueList } from '@/api/subject'
import {storeRevenueExport, storeRevenueImport} from "@/api/excel"
import brandSelect from '@/myComponents/brand-select.vue'
import storeSelect from '@/myComponents/store-select.vue'
import { DateTimeRange, ImportExcel } from '@/components'
import { digitSymbolFormat } from '@/utils/index'
export default {
  data() {
    return {
      allData: {},
      depList: [],
      tableLoading: false,
      networkList: [],
      bankType: 0,
      subBranch: [],
      filter: {
        pageSize: 10,
        pageNum: 1,
        transBeginDate: '',
        transEndDate: '',
        storeCode: undefined,
        brandCode: undefined,
        _dateRange: []
      },
      tableData: [],
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      columns: [
        { title: '交易日期', dataIndex: 'transDate' },
        { title: '店铺', dataIndex: 'storeName', scopedSlots: { customRender: 'storeName' } },
        { title: '归属品牌', dataIndex: 'brandName', scopedSlots: { customRender: 'brandName' } },
        {
          title: '营业收入（元）',
          dataIndex: 'incomeAmount',
          customRender: (text) => digitSymbolFormat(text)
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      UPLOAD_URL:{
        download: storeRevenueExport,
        uploadUrl: storeRevenueImport
      }
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - this.tabbarHeight
    }
  },
  components: { DateTimeRange, brandSelect, storeSelect, ImportExcel },
  activated() {
    this.handle()
  },
  mounted() {
    this.handle()
  },
  methods: {
    checkAccountDetail(record) {
      this.$router.push({ path: '/subject/detail', query: { record: JSON.stringify(record) } })
    },
    handle(v) {
      if (v && v.current) {
        if (this.filter.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.filter.pageNum = v.current
        } else {
          this.filter.pageSize = v.pageSize
          this.filter.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.pageNum = 1
        this.filter.pageSize = 10
        this.pagination.current = 1
      }
      this.tableLoading = true
      storeRevenueList(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-act {
  display: flex;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393f2;
      font-size: 16px;
      font-weight: 500;
      color: #4393f2;
    }
  }
}
.box-total-item {
  font-size: 12px;
}
</style>
